<template>
    <div>
        <!-- 页面：Setting -->
        <page-main>
            <el-tabs tab-position="left" style="height: 600px;">
                <el-tab-pane label="基本信息" class="basic">
                    <h2>基本信息</h2>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form ref="form" :model="form" label-width="120px" label-suffix="：">
                                <el-form-item label="头 像">
                                    <el-upload
                                        class="upload-demo"
                                        action="upload"
                                        :show-file-list="false"
                                        :http-request="fileUpload"
                                    >
                                        <el-image :src="form.face" class="headimg-upload" title="点击上传" />
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="姓 名">
                                    <el-input v-model="form.realname" placeholder="请输入你的姓名" />
                                </el-form-item>
                                <el-form-item label="接受线索">
                                    <el-switch v-model="form.accept" active-value='1' inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="修改密码" class="basic">
                    <h2>修改密码</h2>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form ref="form" :model="form" label-width="120px" label-suffix="：">
                                <el-form-item label="密码">
                                    <el-input v-model="form.pwd" placeholder="请输入你的新密码" />
                                </el-form-item>
                                <el-form-item label="重复密码">
                                    <el-input v-model="form.repwd" placeholder="请输入你的新密码" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <!-- <el-tab-pane label="安全设置" class="security">
                    <h2>安全设置</h2>
                    <div class="setting-list">
                        <div class="item">
                            <div class="content">
                                <div class="title">账户密码</div>
                                <div class="desc">当前密码强度：强</div>
                            </div>
                            <div class="action">
                                <el-button type="text" @click="editPassword">修改</el-button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">密保手机</div>
                                <div class="desc">已绑定手机：187****3441</div>
                            </div>
                            <div class="action">
                                <el-button type="text">修改</el-button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">备用邮箱</div>
                                <div class="desc">当前未绑定备用邮箱</div>
                            </div>
                            <div class="action">
                                <el-button type="text">绑定</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane> -->
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
import { changeMy } from '@/api/common'
import { upFile } from '@/api/common'
export default {
    name: 'PersonalSetting',
    beforeRouteLeave(to, from, next) {
        if (['personalEditPassword'].includes(to.name)) {
            this.$store.commit('keepAlive/add', 'PersonalSetting')
        }
        next()
    },
    props: {},
    data() {
        return {
            form: {
                realname: this.$store.state.user.realname,
                face: this.$store.state.user.avatar,
                accept: this.$store.state.user.accept,
                pwd: '',
                repwd: ''
            }
        }
    },
    created() {
        // this.form = {
        //     realname: this.$store.state.user.realname,
        //     face: this.$store.state.user.avatar,
        //     accept: this.$store.state.user.accept,
        //     pwd: '',
        //     repwd: ''
        // }
    },
    methods: {
        // 修改基础信息
        submit() {
            if (this.form.realname == '') {
                this.$message.error('请输入姓名')
                return;
            }
            if (this.form.pwd != this.form.repwd) {
                this.$message.error('请输入正确的密码')
                return;
            }
            changeMy(this.form).then(res => {
                if (res.status == '1') {
                    this.$message.success('设置成功！')
                    localStorage.setItem('realname', this.form.realname)
                    localStorage.setItem('avatar', this.form.face)
                    localStorage.setItem('accept', this.form.accept)
                    this.$store.state.user.realname = this.form.realname
                    this.$store.state.user.avatar = this.form.face
                    this.$store.state.user.accept = this.form.accept
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 头像上传
        fileUpload(e) {
            const isLt20M = e.file.size / 1024 / 1024 < 20;
            if (!isLt20M) {
                this.$message.error('上传文件大小不能超过 20MB!');
                return;
            }
            let data = new FormData();
            data.append('file', e.file);
            upFile(data).then(result => {
                if (result.status == 1) {
                    this.form.face = result.data.src;
                } else {
                    this.$message.warning('上传失败！')
                }
            })
        },
        // 修改密码
        editPassword() {
            this.$router.push({
                name: 'personalEditPassword'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
    .el-tabs__header .el-tabs__nav {
        .el-tabs__active-bar {
            z-index: 0;
            width: 100%;
            background-color: #e1f0ff;
            border-right: 2px solid #409eff;
        }
        .el-tabs__item {
            text-align: left;
            padding-right: 100px;
        }
    }
    .el-tab-pane {
        padding: 0 20px 0 30px;
    }
}
h2 {
    margin: 0;
    margin-bottom: 30px;
    font-weight: normal;
}
.basic {
    .headimg-upload {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid #eee;
    }
}
.security {
    .setting-list {
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8e8;
            .content {
                .title {
                    margin-bottom: 5px;
                    color: #666;
                }
                .desc {
                    font-size: 14px;
                    color: #999;
                }
            }
            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>
